<template>
    <div>
        <!--面包屑导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/teahome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>文书列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!--用户列表主部分-->
          <template>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="B等级" name="first">
        <el-card>
            <el-row :gutter="25">
                <el-col span="10">
                <!--搜索区--> 
                   <el-input placeholder="输入搜索内容" v-model="queryInfo.query" clearable @clear="getbBookList">
                    <el-button slot="append" icon="el-icon-search" @click="getbBookList"></el-button>
                   </el-input>
                </el-col>
            
            </el-row>
            <!--表格 border边框 stripe隔行变色-->
            <el-table :data="bbookList" border stripe>
                <el-table-column label="文书Id" prop="bid"></el-table-column>
                <el-table-column label="文书名" prop="bname"></el-table-column>
                <el-table-column label="图片" prop="bpicture"></el-table-column>
                <el-table-column label="拥有者" prop="bowner"></el-table-column>
                <el-table-column label="发源地" prop="borigin"></el-table-column>
                <el-table-column label="保密等级" prop="brank"></el-table-column>
                <el-table-column label="内容" prop="btext"></el-table-column>
                <el-table-column label="操作" prop="Action">
           
                 <template slot-scope="scope">
                
                 <el-button type="primary" size="mini" @click="showEditDialog(scope.row)" >文书内容</el-button>
                 <el-button type="primary" size="mini" @click="showEditDialog1(scope.row)" >文书图片</el-button>
                 </template>
                </el-table-column>
            </el-table>
            <!--分页组件-->
            <div>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </el-card>
        </el-tab-pane>
         <el-tab-pane label="C等级" name="second">
        <el-card>
            <el-row :gutter="25">
                <el-col span="10">
                <!--搜索区--> 
                   <el-input placeholder="输入搜索内容" v-model="queryInfo.query" clearable @clear="getcBookList">
                    <el-button slot="append" icon="el-icon-search" @click="getcBookList"></el-button>
                   </el-input>
                </el-col>
            
            </el-row>
            <!--表格 border边框 stripe隔行变色-->
            <el-table :data="cbookList" border stripe>
                <el-table-column label="文书Id" prop="bid"></el-table-column>
                <el-table-column label="文书名" prop="bname"></el-table-column>
                <el-table-column label="图片" prop="bpicture"></el-table-column>
                <el-table-column label="拥有者" prop="bowner"></el-table-column>
                <el-table-column label="发源地" prop="borigin"></el-table-column>
                <el-table-column label="保密等级" prop="brank"></el-table-column>
                <el-table-column label="内容" prop="btext"></el-table-column>
                <el-table-column label="操作" prop="Action">
           
                 <template slot-scope="scope">
                
                 <el-button type="primary" size="mini" @click="showEditDialog(scope.row)" >文书内容</el-button>
                 <el-button type="primary" size="mini" @click="showEditDialog1(scope.row)" >文书图片</el-button>
                 </template>
                </el-table-column>
            </el-table>
            <!--分页组件-->
            <div>
                <el-pagination
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                    :current-page="currentPage4"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="queryInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </el-card>
        </el-tab-pane>
                </el-tabs>

      </template>
        <!--查看区域弹窗-->

        <el-dialog title="文书内容" :visible.sync="showDialogVisible" width="50%" @close="showDialogClose">

            <el-form :model="showForm" ref="showFormRef" label-width="70px"></el-form>

            <div style="display: inline; color: #20a0ff;margin-left: 50px;margin-right:20px;font-size: 12px;">
                {{showForm.btext}}
              </div>
              <span slot="footer" class="dialog-footer">  
                <el-button @click="showDialogVisible=false">关闭</el-button>
                
            </span>

        </el-dialog>

        <el-dialog title="文书图片" :visible.sync="showDialogVisible1" width="50%" @close="showDialogClose1">

            <el-form :model="showForm" ref="showFormRef" label-width="70px"></el-form>

            <div style="display: inline; color: #20a0ff;margin-left: 50px;margin-right:20px;font-size: 12px;">

                <div><img :src="showForm.bpicture" ></div>
               


              </div>
              <span slot="footer" class="dialog-footer">  
                <el-button @click="showDialogVisible1=false">关闭</el-button>
                
            </span>

        </el-dialog>
    </div>
</template>
<script>
    export default{
        created(){
           this.getbBookList();
           this.getcBookList();
        },
        data(){
            return{
                //查询信息实体
                queryInfo:{
                    query:"",
                    pageNum:1,
                    pageSize:5,
                },
                bbookList:[],//文书列表
                cbookList:[],//文书列表
                total:0,
                //对话框状态

                showDialogVisible:false,
                showDialogVisible1:false,
                //表单信息
               
                showForm:{

                    bid:"",

                    bname:"",

                    bpicture:"",

                    bowner:"",

                    borigin:"",

                    brank:"",

                    btext:""

                },
                
            }

        },
        methods:{
           async getbBookList(){
                const {data:res} =await this.$http.get("allBBook",{params:this.queryInfo});
                this.bbookList=res.data;//列表数据封装
                this.total=res.numbers;//总数封装
            },
             async getcBookList(){
                const {data:res} =await this.$http.get("allCBook",{params:this.queryInfo});
                this.cbookList=res.data;//列表数据封装
                this.total=res.numbers;//总数封装
            },
            async showEditDialog(s){
                this.showForm=s;//存储查询信息
                this.showDialogVisible=true;//开启编辑框
            },
            async showEditDialog1(s){
                this.showForm=s;//存储查询信息
                this.showDialogVisible1=true;//开启编辑框
            },
            //最大数
            handleSizeChange(newSize){
                this.queryInfo.pageSize=newSize;
                this.getbBookList();
            },
             handleSizeChange2(newSize){
                this.queryInfo.pageSize=newSize;
                this.getcBookList();
            },
            //pageNum的触发
            handleCurrentChange(newPage){
                this.queryInfo.pageNum=newPage;
                this.getbBookList();
            },
             handleCurrentChange2(newPage){
                this.queryInfo.pageNum=newPage;
                this.getcBookList();
            },
            //监听查看操作

            showDialogClose(){

                this.$refs.showFormRef.resetFields();
            },
            showDialogClose1(){

                this.$refs.showFormRef.resetFields();
            },

            //添加
            //监听添加操作
            }
    }
</script>
<style  scoped>
.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 15px;
}
</style>